<script setup>
const props = defineProps({
  headerConfig: {
    type: Array,
    default: () => [],
  },
  form: {
    type: Object,
    default: () => {},
  },
  align: {
    type: String,
    default: () => "flex-start",
  },
  gap: {
    type: String,
    default: () => "20",
  },
  isMerge: {
    type: Boolean,
    default: () => false,
  },
  allAlign: {
    type: String,
    default: () => "space-between",
  },
});

const mergeList = computed(() => {
  if (props.isMerge) {
    // 合并的排法 按钮和其他选项全部一起排
    return [props.headerConfig, []];
  } else {
    // 不合并的排法
    return [
      props.headerConfig.filter((i) => i.type !== "button"),
      props.headerConfig.filter((i) => i.type === "button"),
    ];
  }
});

const emit = defineEmits();

const emitMethod = (value) => {
  emit(value);
};

onMounted(() => {});
</script>
<template>
  <div :style="`display:flex;justify-content: ${allAlign};gap:${gap}px`">
    <div
      class="config-table-header"
      :style="`justify-content:${align};gap:${gap}px`"
      v-if="mergeList[0].length != 0"
    >
      <div
        v-for="(item, index) in mergeList[0]"
        :key="index"
        class="table-header-item"
      >
        <span
          v-if="item.label"
          :style="`width:${item.lableWidth}px;text-align:right `"
          >{{ item.label }}</span
        >
        <!-- 输入框 -->
        <el-input
          v-if="item.type === 'input'"
          v-model="form[`${item.prop}`]"
          :placeholder="item.placeholder || '请输入'"
          :style="`width:${item.width}px`"
          :type="item.inputType || 'text'"
          :disabled="item.disabled || false"
          :clearable="item.clearable || false"
          @keyup.enter.native="emitMethod(item.enterMethod || '')"
          @blur="emitMethod(item.method || '')"
        ></el-input>
        <!-- 选择器 -->
        <el-select
          v-if="item.type === 'select'"
          v-model="form[`${item.prop}`]"
          :placeholder="item.placeholder || '请选择'"
          :disabled="item.disabled || false"
          :clearable="item.clearable || false"
          :multiple="item.multiple || false"
          :filterable="item.filterable || true"
          :default-first-option="true"
          :allow-create="item.allowCreate || false"
          :style="`width:${item.width}px`"
          @change="emitMethod(item.method || '')"
        >
          <!-- 这里需要你传入该单选循环的数组 -->
          <el-option
            v-for="_item in item.options"
            :key="_item[item.optionValue || 'value']"
            :label="_item[item.optionLabel || 'label']"
            :value="_item[item.optionValue || 'value']"
          ></el-option>
        </el-select>
        <!-- 按钮 -->
        <el-button
          v-if="item.type === 'button'"
          :type="item.btnType || 'primary'"
          @click="emitMethod(item.method || '')"
        >
          {{ item.text }}
        </el-button>
        <!-- 日期选择器 -->
        <el-date-picker
          v-model="form[`${item.prop}`]"
          v-if="item.type === 'datePicker'"
          :type="item.dateType || 'date'"
          :placeholder="item.placeholder || '选择日期'"
          :format="item.format || 'YYYY-MM-DD'"
          :value-format="item.valueFormat || 'YYYY-MM-DD'"
          :range-separator="item.separator || '至'"
          :start-placeholder="item.startPlaceholder || '开始日期'"
          :end-placeholder="item.endPlaceholder || '结束日期'"
          :default-time="item.defaultTime || null"
          :style="`width:${item.width}px`"
          @change="emitMethod(item.method || '')"
        ></el-date-picker>
        <!-- 预留一个插槽 -->
        <slot v-if="item.scope" :name="item.scope" />
      </div>
    </div>
    <div
      class="config-table-header"
      :style="`justify-content:${align};gap:${gap}px`"
    >
      <div
        v-for="(item, index) in mergeList[1]"
        :key="index"
        class="table-header-item"
      >
        <el-button
          :type="item.btnType || 'primary'"
          @click="emitMethod(item.method || '')"
          >{{ item.text }}</el-button
        >
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.config-table-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 13px;
  .table-header-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
  }
}
</style>
